<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="7">
        <a-card :bordered="false">
          <div class="account-center-avatarHolder">
            <div class="avatar">
              <img src="../../assets/logo.png" />
            </div>
            <div class="username">飞行小管</div>
            <div class="bio">motoo</div>
          </div>
          <div class="account-center-detail">
            <p>
              <i class="title"></i>举重教练
            </p>
            <p>
              <i class="group"></i>省－市－区－单位－级别
            </p>
            <p>
              <i class="address"></i>
              <span>浙江省</span>
              <span>杭州市</span>
            </p>
          </div>
          <a-divider />

          <div class="account-center-tags">
            <div class="tagsTitle">身体数据</div>
            <div>
              <p>编码：121313</p>
              <p>体重：身高：</p>
              <p>体脂率：BMI:</p>
              <p>肩宽：</p>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card
          style="width:100%"
          :bordered="false"
          :tabList="tabListNoTitle"
          :activeTabKey="noTitleKey"
          @tabChange="key => handleTabChange(key, 'noTitleKey')"
        >
          <Record v-if="noTitleKey === 'PracticeRecord'"></Record>
          <app-page v-else-if="noTitleKey === 'Practice'"></app-page>
          <Achievement v-else-if="noTitleKey === 'Achievement'"></Achievement>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { AppPage, Record, Achievement } from "./page";
export default {
  components: {
    AppPage,
    Record,
    Achievement
  },
  data() {
    return {
      tags: ["很有想法的", "专注设计", "辣~", "大长腿", "川妹子", "海纳百川"],

      tagInputVisible: false,
      tagInputValue: "",

      teams: [],
      teamSpinning: true,

      tabListNoTitle: [
        {
          key: "PracticeRecord",
          tab: "训练记录"
        },
        {
          key: "Practice",
          tab: "训练情况"
        },
        {
          key: "Achievement",
          tab: "我的成绩"
        }
      ],
      noTitleKey: "app"
    };
  },
  mounted() {},
  methods: {
    handleTabChange (key, type) {
      this[type] = key
    },
  }
};
</script>

<style lang="scss" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    & > .avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }

  .account-center-detail {
    p {
      margin-bottom: 8px;
      padding-left: 26px;
      position: relative;
    }

    i {
      position: absolute;
      height: 14px;
      width: 14px;
      left: 0;
      top: 4px;
      background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
    }

    .title {
      background-position: 0 0;
    }
    .group {
      background-position: 0 -22px;
    }
    .address {
      background-position: 0 -44px;
    }
  }

  .account-center-tags {
    .ant-tag {
      margin-bottom: 8px;
    }
  }
}
</style>
